<template>
	<view class="score-wrap">
		<view class="top flex column jcc aic">
			<view class="text-fw color-brown fs-40">{{totalScore}}</view>
			<view class="color-brown">积分</view>
		</view>
		<view class="score-container flex column">
			<view class="fs-28 color-gray">
				积分明细
			</view>
			<view class="detail column" v-for="(item, index) in scoreInfo" :key="index">
				<view class="margin-bottom-15">
					{{item.increment > 0 ? '+' + item.increment: item.increment}}
				</view>
				<view class="color-gray">
					{{item.createTime}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return{
				totalScore: 0,
				scoreInfo: []
			}
		},
		computed:{
			...mapState(['userInfo'])
		},
		onLoad(option) {
			console.log("option",option)
			this.totalScore = option.totalScore || 0;
			this.getScoreDetail()
		},
		methods:{
			getScoreDetail() {
				if(!this.userInfo || !this.userInfo.id) {
					return;
				}
				var param = {
					userid: this.userInfo.id
				}
				this.$apis.getUserScoreDetail(param)
				.then(res=>{
					console.log("用户积分明细:",res)
					this.scoreInfo = res.rows;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.score-wrap {
		background-color: #fff;
		.color-brown {
			color: #9a651c;
		}
		.color-gray {
			color: #727272;
		}
		.top {
			width: 100%;
			height: 300upx;
			background-image: url('https://sqzp.oss-cn-guangzhou.aliyuncs.com/scoreBg.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
		.score-container {
			width: 100%;
			height: calc(100% - 400upx);
			border-top-left-radius: 20upx;
			border-top-right-radius: 20upx;
			position: relative;
			top: -60upx;
			box-sizing: border-box;
			background-color: #fff;
			padding: 40upx 30upx;
		}
		.detail {
			display: flex;
			width: 100%;
			padding: 30upx 0;
			border-bottom: 1px solid #eee;
		}
	}
</style>